
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import style from "./index.module.less"
import Tabbar from "../mine/tabbar";
import NewsTicker from './new';
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons"
import React, { Fragment, useState,useEffect } from 'react'
import { Carousel } from 'antd';
import { getsysconfig,getsystemnotice,getinfo,loginouts } from "@/apis/user.js"
import th1 from '../../static/1626944436624-0ql4qr7rilri.png'
import logo from '../../static/Q9.png'
import avatar from '../../static/icon-account.png'
import HK from '../../static/hk.png'
import EN from '../../static/en.png'
import TH from '../../static/th.png'
import DB4 from '../../static/db4.jpg'
import A515 from '../../static/515.jpg'
import DRAGONBG from '../../static/dragon-bg.png'
import Logodg from '../../static/logo-dg-blue.png'
import Bkdg from '../../static/bk-dg.png'
import i18n from 'i18next';

import zhenrenpp from '../../static/zhenren/PPLIVE.png'
import zhenrenbbin from '../../static/zhenren/BBLIVE.png'
import zhenrendg from '../../static/zhenren/DGLIVE.png'
import zhenrenevo from '../../static/zhenren/EVOLIVE.png'
import zhenrensex from '../../static/zhenren/SEXYLIVE.png'
import zhenrenwe from '../../static/zhenren/WELIVE.png'
import zhenrenwm from '../../static/zhenren/WMLIVE.png'

import buyufc from '../../static/buyu/FCBY.png'
import buyujdb from '../../static/buyu/JDBBY.png'
import buyujoker from '../../static/buyu/JOKERBY.png'
import buyurtg from '../../static/buyu/RTGBY.png'
import buyuyl from '../../static/buyu/YLBY.png'

import qipai365 from '../../static/qipai/365QP.png'
import qipaidt from '../../static/qipai/DTQP.png'
import qipaiky from '../../static/qipai/KYQP.png'
import qipailg from '../../static/qipai/LGQP.png'
import qipaivg from '../../static/qipai/VGQP.png'

import dianziae from '../../static/dianzi/AEDZ.png'
import dianzibbin from '../../static/dianzi/BBINDZ.png'
import dianzicq9 from '../../static/dianzi/CQ9DZ.png'
import dianzijdb from '../../static/dianzi/JDBDZ.png'
import dianzijoker from '../../static/dianzi/JOKERx1.png'
import dianzimw from '../../static/dianzi/MWDZ.png'
import dianzipg from '../../static/dianzi/PGDZ.png'
import dianzijoker2 from '../../static/dianzi/JOKERx2.png'
import dianzijoker3 from '../../static/dianzi/JOKERx5.png'
import dianzijoker4 from '../../static/dianzi/JOKERx10.png'
import dianzijoker5 from '../../static/dianzi/JOKERx20.png'

import tiyucmd from '../../static/tiyu/CMDTY.png'
import tiyudb from '../../static/tiyu/DBTY.png'
import tiyusbo from '../../static/tiyu/SBOTY.png'
import tiyuug from '../../static/tiyu/UGTY.png'

import dianjingia from '../../static/dianjing/IADJ.png'
import dianjingtf from '../../static/dianjing/TFDJ.png'

import dongwurcb from '../../static/dongwu/RCB.png'
import dongwusv from '../../static/dongwu/SV388.png'

import { message } from "antd";
import { Toast } from 'antd-mobile'

const Mine = (props) => {
	const { t, i18n } = useTranslation()
	const BASE_URL = import.meta.env.VITE_BASE_URL;
	const navigate = useNavigate()
	const [lang,setLang]=useState(false);
	const [langs,setLangs]=useState(0);
	const [active,serActive]=useState(1);
	const [actives,serActives]=useState(true);
	const [activeFirst,serActiveFirst]=useState(2);
	const newsItems=['']
	const [flag, setFlag] = useState(false);
	const [sysconfig,setSysconfig] = useState(t('index.title1'))
	const [banner,setbanner] = useState([])
	const [systemnotice,setSystemnotice] = useState([])
	const [infos,setInfos] = useState([])
	const [infosName,setInfosName] = useState([])
	const [islogin,setIslogin] = useState(true)
	//电子
			const dianziitems = [ {
				proCode: '501',
				title: 'JOKER1',
				prefix: '1e5',
				gameType: 'RNG',
				img:dianzijoker
			},
				{
					proCode: '503',
					title: 'JOKER2',
					prefix: '1e5',
					gameType: 'RNG',
					img:dianzijoker2
				},
				{
					proCode: '504',
					title: 'JOKER5',
					prefix: '1e5',
					gameType: 'RNG',
					img:dianzijoker3
				},
				{
					proCode: '505',
					title: 'JOKER10',
					prefix: '1e5',
					gameType: 'RNG',
					img:dianzijoker4
				},
				{
					proCode: '506',
					title: 'JOKER20',
					prefix: '1e5',
					gameType: 'RNG',
					img:dianzijoker5
				},
			  {
			    proCode: '168',
			    title: 'MW',
			    prefix: '1e5',
			  		gameType: 'RNG',
					img:dianzimw
			  },
			  // {
			  //   proCode: '39',
			  //   title: 'PP',
			  //   prefix: '1e5',
			  // 		gameType: 'RNG',
					// img:dianzipg
			  // },
			  {
			    proCode: '16',
			    title: 'CQ9',
			    prefix: '1e5',
			  		gameType: 'RNG',
					img:dianzicq9
			  },
			  {
			    proCode: '55',
			    title: 'JDB',
			    prefix: '1e5',
			  		gameType: 'RNG',
					img:dianzijdb
			  },
			  {
			    proCode: '79',
			    title: 'BB',
			    prefix: '1e5',
			  		gameType: 'RNG',
					img:dianzibbin
			  },
			  {
			    proCode: '98',
			    title: 'PG',
			    prefix: '1e5',
			  		gameType: 'RNG',
					img:dianzipg
			  },
			  {
			    proCode: '17',
			    title: 'AE',
			    prefix: '1e5',
			    gameType: 'RNG',
				img:dianziae
			  }
			 //  {
			 //    proCode: '86',
			 //    title: 'EG',
			 //    prefix: '1e5',
				// gameType: 'RNG',
			 //  },
			 //  {
			 //    proCode: '141',
			 //    title: 'FC',
			 //    prefix: '1e5',
				// gameType: 'RNG',
			 //  },
			 //  {
			 //    proCode: '38',
			 //    title: 'KY',
			 //    prefix: '1e5',
				// gameType: 'RNG',
			 //  },
			 //  {
			 //    proCode: '143',
			 //    title: 'LY',
			 //    prefix: '1e5',
				// gameType: 'RNG',
			 //  },
			 //  {
			 //    proCode: '44',
			 //    title: 'RTG',
			 //    prefix: '1e5',
				// gameType: 'RNG',
			 //  },
			 //  {
			 //    proCode: '125',
			 //    title: 'YL',
			 //    prefix: '1e5',
				// gameType: 'RNG',
			 //  },
			];
			//棋牌
			const qipaiitems = [
				{
				  proCode: '38',
				  title: 'KY',
				  prefix: '1e5',
						gameType: 'PVP',
						img:qipaiky
				},
				 {
				   proCode: '143',
				   title: 'LY',
				   prefix: '1e5',
						gameType: 'PVP',
						img:qipailg
				 },
				{
				  proCode: '62',
				  title: 'VG',
				  prefix: '1e5',
						gameType: 'PVP',
						img:qipaivg
				},
				{
				  proCode: '115',
				  title: 'DTQ',
				  prefix: '1e5',
						gameType: 'PVP',
						img:qipaidt
				},
				{
				  proCode: '134',
				  title: '365',
				  prefix: '1e5',
						gameType: 'PVP',
						img:qipai365
				},
			 //  {
			 //    proCode: '55',
			 //    title: 'JDB',
			 //    prefix: '1e5',
				// gameType: 'PVP',
			 //  },

			];
			//真人
			const zhenrenitems = [
				{
				  proCode: '39',
				  title: 'PP',
				  prefix: '1e5',
						gameType: 'LIVE',
						img: zhenrenpp
				},
				{
				   proCode: '86',
				   title: 'EG',
				   prefix: '1e5',
						gameType: 'LIVE',
						img: zhenrenevo
				 },
				{
				  proCode: '179',
				  title: 'WE',
				  prefix: '1e5',
						gameType: 'LIVE',
						img: zhenrenwe
				},
				{
				  proCode: '27',
				  title: 'DG',
				  prefix: '1e5',
				gameType: 'LIVE',
				img: zhenrendg
				},
				{
				  proCode: '112',
				  title: 'SEX',
				  prefix: '1e5',
						gameType: 'LIVE',
						img: zhenrensex
				},
				{
				  proCode: '118',
				  title: 'WM',
				  prefix: '1e5',
						gameType: 'LIVE',
						img: zhenrenwm
				},
				{
				  proCode: '79',
				  title: 'BBIN',
				  prefix: '1e5',
						gameType: 'LIVE',
						img: zhenrenbbin
				},
			 //  {
			 //    proCode: '79',
			 //    title: 'BB',
			 //    prefix: '1e5',
				// gameType: 'LIVE',
			 //  },
			 //  {
			 //    proCode: '16',
			 //    title: 'CQ9',
			 //    prefix: '1e5',
				// gameType: 'LIVE',
			 //  },
			 //  {

			 //  {
			 //    proCode: '54',
			 //    title: 'SBO',
			 //    prefix: '1e5',
				// gameType: 'LIVE',
			 //  },
			];
			//捕鱼
			const buyuitems = [
				{
				  proCode: '501',
				  title: 'JOKER',
				  prefix: '1e5',
				  gameType: 'RNG',
				  img:buyujoker
				},
				{
				  proCode: '55',
				  title: 'JDB',
				  prefix: '1e5',
						gameType: 'FISH',
						img:buyujdb
				},
				{
				  proCode: '141',
				  title: 'FC',
				  prefix: '1e5',
						gameType: 'FISH',
						img:buyufc
				},
				{
				  proCode: '125',
				  title: 'YL',
				  prefix: '1e5',
						gameType: 'FISH',
						img:buyuyl
				},
				{
				  proCode: '44',
				  title: 'RTG',
				  prefix: '1e5',
						gameType: 'FISH',
						img:buyurtg
				},
			 //  {
			 //    proCode: '79',
			 //    title: 'BB',
			 //    prefix: '1e5',
				// gameType: 'FISH',
			 //  },
			 //  {
			 //    proCode: '16',
			 //    title: 'CQ9',
			 //    prefix: '1e5',
				// gameType: 'FISH',
			 //  },
			 //  {
			 //    proCode: '115',
			 //    title: 'DTQ',
			 //    prefix: '1e5',
				// gameType: 'FISH',
			 //  },
			 //  {
			 //    proCode: '38',
			 //    title: 'KY',
			 //    prefix: '1e5',
				// gameType: 'FISH',
			 //  },
			 //  {
			 //    proCode: '143',
			 //    title: 'LY',
			 //    prefix: '1e5',
				// gameType: 'FISH',
			 //  },
			 //  {
			 //    proCode: '62',
			 //    title: 'VG',
			 //    prefix: '1e5',
				// gameType: 'FISH',
			 //  },

			];
			//体育
			const tiyuitems = [
				{
				  proCode: '54',
				  title: 'SBO',
				  prefix: '1e5',
						gameType: 'SPORTS',
						img:tiyusbo
				},
				{
				  proCode: '104',
				  title: 'CMD',
				  prefix: '1e5',
						gameType: 'SPORTS',
						img:tiyucmd
				},
				{
				  proCode: '151',
				  title: 'UG2',
				  prefix: '1e5',
						gameType: 'SPORTS',
						img:tiyuug
				},
				{
				  proCode: '131',
				  title: 'OBSB',
				  prefix: '1e5',
						gameType: 'SPORTS',
						img:tiyudb
				},
				// {
				//   proCode: '132',
				//   title: 'sv388',
				//   prefix: '1e5',
				// 		gameType: 'SPORTS',
				// 		img:tiyudb
				// },
				// {
				//   proCode: '148',
				//   title: 'RCB',
				//   prefix: '1e5',
				// 		gameType: 'ESPORT',
				// 		img:tiyudb
				// }
			 //  {
			 //    proCode: '79',
			 //    title: 'BB',
			 //    prefix: '1e5',
				// gameType: 'SPORTS',
			 //  },
			 //  {
			 //    proCode: '148',
			 //    title: 'RCB',
			 //    prefix: '1e5',
				// gameType: 'SPORTS',
			 //  },
			 //  {
			 //    proCode: '132',
			 //    title: 'SV3',
			 //    prefix: '1e5',
				// gameType: 'SPORTS',
			 //  },
			];
			//电竞
			const dianjingitems = [
			  {
			    proCode: '99',
			    title: 'TF',
			    prefix: '1e5',
			  		gameType: 'ESPORT',
					img:dianjingtf
			  },{
			    proCode: '71',
			    title: 'IA',
			    prefix: '1e5',
				gameType: 'ESPORT',
				img:dianjingia
			  },
			];
			//赛马
			const saimaitems = [
			  {
			    proCode: '148',
			    title: 'RCB',
			    prefix: '1e5',
			  		gameType: 'ESPORT',
					img:dongwurcb
			  }
			];
			//斗鸡
			const doujiitems = [
			  {
			    proCode: '132',
			    title: 'sv388',
			    prefix: '1e5',
			  		gameType: 'SPORTS',
					img:dongwusv
			  }
			];
	useEffect(() => {
		setTimeout(()=>{
			if (window.scrollTo) {
				window.scrollTo(0, 0);
			} else if (document.body.scrollTop) {
				document.body.scrollTop = 0;
			} else {
				document.documentElement.scrollTop = 0;
			}
				document.getElementById('root').scrollIntoView(true);
				document.getElementById('body').scrollIntoView(true);
		},0)


		// setFlag(true);
		if(!localStorage.getItem('lang')){
			localStorage.setItem('lang', 'hk')
			localStorage.setItem('langs','0')
		}
		i18n.changeLanguage(localStorage.getItem('lang'))
		getsysconfig().then(res => {
			if (res.status.errorCode == 0) {
				document.title = res.data.keyword
				localStorage.setItem("config",JSON.stringify(res.data))
				setSysconfig(res.data)
				setbanner(res.data.banners)
			}
		})
		getsystemnotice().then(res => {
			if (res.status.errorCode == 0) {
				setSystemnotice(res.data)
			}
		})
		setLangs(localStorage.getItem('langs'))
		console.log(localStorage.getItem('langs'))
		if(localStorage.getItem('token')){
			setIslogin(true)
			getsystemnotice().then(res => {
				if (res.status.errorCode == 0) {
					setSystemnotice(res.data)
				}
			})
			if(localStorage.getItem('name')){
				setInfosName(localStorage.getItem('name'))
				setInfos(JSON.parse(localStorage.getItem('info')))
			}else{
				setInfosName(localStorage.getItem('name'))
				setInfos(JSON.parse(localStorage.getItem('info')))
			}
			getinfo().then(res => {
				if (res.status.errorCode == 0) {
					localStorage.setItem('info',JSON.stringify(res.data.member))
					setInfos(JSON.parse(localStorage.getItem('info')))
					localStorage.setItem('name',res.data.member.name)
					setInfosName(localStorage.getItem('name'))
				}
			})
		}else{
			setIslogin(false)
		}
		const handleVisibilityChange = () => {
            if (document.hidden) {
            } else {
				// getinfo().then(res => {
				// 	if (res.status.errorCode == 0) {
				// 		localStorage.setItem('info',JSON.stringify(res.data.member))
				// 		setInfos(JSON.parse(localStorage.getItem('info')))
				// 		localStorage.setItem('name',res.data.member.name)
				// 		setInfosName(localStorage.getItem('name'))
				// 	}else{
				// 		setIslogin(false)
				// 	}
				// })
				if(localStorage.getItem('token')){
					setIslogin(true)
					// getsystemnotice().then(res => {
					// 	if (res.status.errorCode == 0) {
					// 		setSystemnotice(res.data)
					// 	}
					// })
					// if(localStorage.getItem('name')){
					// 	setInfosName(localStorage.getItem('name'))
					// 	setInfos(JSON.parse(localStorage.getItem('info')))
					// }else{
					// 	setInfosName(localStorage.getItem('name'))
					// 	setInfos(JSON.parse(localStorage.getItem('info')))
					// }
					getinfo().then(res => {
						if (res.status.errorCode == 0) {
							localStorage.setItem('info',JSON.stringify(res.data.member))
							setInfos(JSON.parse(localStorage.getItem('info')))
							localStorage.setItem('name',res.data.member.name)
							setInfosName(localStorage.getItem('name'))
						}
					})
				}else{
					setIslogin(false)
				}
            }
        };
		// const interval = setInterval(() => {

		// 	if(localStorage.getItem('token') == null){
		// 		setIslogin(false)
		// 	}
		//   }, 1000);
			document.addEventListener('visibilitychange', handleVisibilityChange);
		return ()=>{
			// clearInterval(interval);
			document.removeEventListener('visibilitychange', handleVisibilityChange);
		}
	  }, []);
	const changeLang=()=>{
		let status = !lang
		setLang(status) //更新 active 状态
	}
	const changeLangs=(current,language)=>{
		setLangs(current) //更新 active 状态
		console.log(language)
		localStorage.setItem('lang', language)
		localStorage.setItem('langs', current)
		i18n.changeLanguage(language)
		changeLang();
	}
	const changeTab=(current)=>{
		serActives(false)
		serActiveFirst(1)
		serActive(current) //更新 active 状态
		setTimeout(function(){
			serActives(true)
		},500)
	}

	const contentStyle = React.CSSProperties = {
		margin: 0,
		height: '40.774vmin',
		color: '#fff',
		lineHeight: '160px',
		textAlign: 'center',
		background: '#364d79',
		borderRadius: '10px',
	}
	const onChange = (currentSlide=number) => {
	    // console.log(currentSlide)
	}
	const onChange1 = (currentSlide=number) => {
	    // console.log(currentSlide)
	}
	const onChangeItem =  (current) => {
		if(!islogin || localStorage.getItem('token') == null || localStorage.getItem('login') == null){
			navigate('/login')
			return false
		}
		// let data = await getinfo();
		// if(data.status.errorCode !=0)return
		let url = "/m/game/game_list?product_type=" + current.proCode + '&game_type=' + current.gameType + '&gameCode=&devices=1&code=' + current.title + '&token=' + localStorage.getItem('token') + '&language=' + localStorage.getItem('lang');
		let a =  [
			'Joker',
			'MW',
			'PP',
			'CQ9',
			'JDB',
			'BBIN',
			'PG',
			'AE',
			'FC',
			'YL',
			'RTG',
		]
		if(active == 3){

			if(current.title.indexOf('JOKER') >= 0){
				let token = localStorage.getItem('token')
				let urls = '/m/game/play_game?product_type=' + current.proCode + '&game_type=' + '&gameCode=&devices=1' + '&token=' + token + '&code=' + current.title + '&language=' + localStorage.getItem('lang')
				window.open('/m/game/play_game?product_type=' + current.proCode + '&game_type=' + '&gameCode=&devices=1' + '&token=' + token + '&code=' + current.title + '&language=' + localStorage.getItem('lang'))
				return
			}else{
				localStorage.setItem('proCode',current.proCode)
				localStorage.setItem('code',current.title)
				localStorage.setItem('gameType',current.gameType)
				navigate('/gamelist')
				return
			}
		}else if(active == 5){

			if(current.title.indexOf('JOKER') >= 0){
				let token = localStorage.getItem('token')
				let urls = '/m/game/play_game?product_type=' + current.proCode + '&game_type=' + '&gameCode=&devices=1' + '&token=' + token + '&code=' + current.title + '&language=' + localStorage.getItem('lang')
				window.open('/m/game/play_game?product_type=' + current.proCode + '&game_type=' + '&gameCode=&devices=1' + '&token=' + token + '&code=' + current.title + '&language=' + localStorage.getItem('lang'))
				return
			}else{
				localStorage.setItem('proCode',current.proCode)
				localStorage.setItem('code',current.title)
				localStorage.setItem('gameType',current.gameType)
				navigate('/gamelist')
				return
			}
		}

		// var userAgent = navigator.userAgent || navigator.vendor || window.opera;

		// // 如果是安卓系统
		// if (/android/i.test(userAgent)) {
		//   window.open(url);
		// }
		// // 如果是 iOS 系统
		// else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
		//
		// 	window.open(url)
		// }
		window.open(url) //这里是打开新窗口
		//w.location.href = url //这样就可以跳转了
		// navigate('/indexIframe?current='+url)
	}
	const loginout = () => {
		loginouts().then(res => {
			if (res.status.errorCode == 0) {
				localStorage.removeItem('token')
				localStorage.removeItem('name')
				sessionStorage.removeItem('login')
				navigate('/login')
			}else{
				setIslogin(false)
			}
		})
	}
	const gopageLoad = (params)=>{
		if(!islogin || localStorage.getItem('token') == null || localStorage.getItem('login') == null){
			navigate('/login')
			return false
		}
		if(params == 1){
			navigate('/rakeback_get')
		}
		if(params == 2){
			navigate('/rechargeorder')
		}
		if(params == 3){
			navigate('/withdraw')
		}
	}
	// <div className={style['dragon-tiger-container']}>
				// 	<img src={DRAGONBG} alt="" />
				// 	<div className={style['dragon-tiger-content']}>
				// 		<Carousel dotPosition='right' afterChange={onChange1} autoplay dots={false}>
				// 			<div>
				// 				<h3 className={style['items']}>
				// 					<span>204***122</span>
				// 					<span>$225154</span>
				// 				</h3>
				// 			</div>
				// 			<div>
				// 				<h3 className={style['items']}>
				// 					<span>204***122</span>
				// 					<span>$225154</span>
				// 				</h3>
				// 			</div>
				// 			<div>
				// 				<h3 className={style['items']}>
				// 					<span>204***122</span>
				// 					<span>$225154</span>
				// 				</h3>
				// 			</div>
				// 			<div>
				// 				<h3 className={style['items']}>
				// 					<span>204***122</span>
				// 					<span>$225154</span>
				// 				</h3>
				// 			</div>
				// 		</Carousel>
				// 	</div>
				// </div>
	return (
		<React.Fragment>
			<div className={style['home']} style={{overflowX:'hidden'}}>
				<div className={style['sportIIHeader']}>
					<div className={style['logo']}>
						<img src={logo} alt="" />
					</div>
					<div className={style['functional']}>
						{
							islogin ? (<div className={style['account-info']}>
								<img src={avatar} alt="" />
								<span className={style['userid']}>{infosName}</span>
							</div>) : (<div className={style['func-btn']} onClick={() => navigate('/login')}>
								<div className={style['icon-logout2']}></div>
								<div className={style['label']}>{t('index.title3')}</div>
							</div>)
						}
						{
							islogin ? (<div className={style['func-btn']} onClick={()=>{loginout()}}>
								<div className={style['icon-logout']}></div>
								<div className={style['label']}>{t('index.title2')}</div>
							</div>) : (<div className={style['func-btn']} onClick={() => navigate('/register')}>
								<div className={style['icon-logout1']}></div>
								<div className={style['label']}>{t('register.title23')}</div>
							</div>)
						}
						<div className={style['func-btn']}>
							<div className={style['icon-sound-on']}></div>
						</div>
						<div className={style['lang-wrapper']}>
							<div className={style['current-lang']} onClick={()=>{changeLang()}}>
								{
									langs == 0 ? (<img src={HK} alt="" />) : ''
								}
								{
									langs == 1 ? (<img src={EN} alt="" />) : ''
								}
								{
									langs == 2 ? (<img src={TH} alt="" />) : ''
								}
							</div>
							{
								lang ? (<div className={style['select-langs']}>
									<div className={style['option-lang']} onClick={()=>{changeLangs(0,'hk')}}>
										<img src={HK} alt="" />
									</div>
									<div className={style['option-lang']} onClick={()=>{changeLangs(1,'en')}}>
										<img src={EN} alt="" />
									</div>
									<div className={style['option-lang']} onClick={()=>{changeLangs(2,'th')}}>
										<img src={TH} alt="" />
									</div>
								</div>) : ''
							}
						</div>
					</div>
				</div>
				<Carousel afterChange={onChange} autoplay={true} pauseOnHover={false}>
					{banner.length > 0 && (
						banner.map((item,index)=>{
						return (
							<div key={index}>
							    <img src={item.path} alt="" />
							</div>
						);
						})
					)}
				</Carousel>
				<div className={style['notice']} onClick={() => navigate('/dongtai')}>
					<div className={style['noticeicon']}></div>
					<NewsTicker newsItems={systemnotice}/>
				</div>

				<div className={style['accountFunctions']}>
					<div className={style['account-user']}>
						{
							islogin ? (<div className={style['online-number']}>
								<div>{t('index.title4')}</div>
								<div>73529</div>
							</div>) : (<div className={style['online-number1']}>
								<div>{t('index.title4')}</div>
								<div>73529</div>
							</div>)
						}
						{
							islogin ? (<div className={style['balances']}>
								<div className={style['balance']}>
									<div className={style['label']}>{t('index.title5')}: </div>
									<div>{infos ? infos.money : "0.00"}</div>
								</div>
								<div className={style['balance']}>
									<div className={style['label']}>{t('index.title6')}</div>
									<div>0.00</div>
								</div>
							</div>) : ('')
						}

					</div>
					<div className={style['buttons']}>
						{/* <div className={style['account-button']}>
							<div className={style['icon-gift']}></div>
							<div className={style['label']}>{t('index.title7')}</div>
						</div> */}
						<div className={style['account-button']} onClick={() => gopageLoad(1) }>
							<div className={style['icon-rebate']}></div>
							<div className={style['label']}>{t('index.title8')}</div>
						</div>
						<div className={style['account-button']} onClick={() => gopageLoad(2) }>
							<div className={style['icon-deposit']}></div>
							<div className={style['label']}>{t('index.title9')}</div>
						</div>
						<div className={style['account-button']} onClick={() => gopageLoad(3) }>
							<div className={style['icon-withdraw']}></div>
							<div className={style['label']}>{t('index.title10')}</div>
						</div>
					</div>
				</div>
				<div className={style['homeSportIIGameCategory']}>
					<div className={style['game-category-content']}>
						<div className={style['game-category']}>
							<div className={`${style['category-filter']} ${active === 1 ? style['active'] : ''}`} onClick={()=>{changeTab(1)}}>
								<div className={style['icon-live']}></div>
								<div className={style['label']}>{t('index.title11')}</div>
							</div>
							<div className={`${style['category-filter']} ${active === 2 ? style['active'] : ''}`} onClick={()=>{changeTab(2)}}>
								<div className={style['icon-sport']}></div>
								<div className={style['label']}>{t('index.title12')}</div>
							</div>
							<div className={`${style['category-filter']} ${active === 5 ? style['active'] : ''}`} onClick={()=>{changeTab(5)}}>
								<div className={style['icon-dianzi']}></div>
								<div className={style['label']}>{t('index.title16')}</div>
							</div>
							<div className={`${style['category-filter']} ${active === 4 ? style['active'] : ''}`} onClick={()=>{changeTab(4)}}>
								<div className={style['icon-qipai']}></div>
								<div className={style['label']}>{t('index.title15')}</div>
							</div>
							<div className={`${style['category-filter']} ${active === 3 ? style['active'] : ''}`} onClick={()=>{changeTab(3)}}>
								<div className={style['icon-buyu']}></div>
								<div className={style['label']}>{t('index.title13')}</div>
							</div>
							<div className={`${style['category-filter']} ${active === 6 ? style['active'] : ''}`} onClick={()=>{changeTab(6)}}>
								<div className={style['icon-dianjing']}></div>
								<div className={style['label']}>{t('index.title17')}</div>
							</div>
						</div>
						<div className={`${style['game-list']} ${(active === 1) ? activeFirst == 1 ?  style['active'] : style['active1'] : style['hide']}`} >
							{zhenrenitems.map((item, index) => (
							<div key={index}  className={style['enter-game-button']} onClick={() => onChangeItem(item)}>
								{/*<div className={style['game-name']}>
									<div>
										<img src={Logodg} alt="" />
										<div className={style['label']}>{item.title}</div>
									</div>
								</div>
								<img className={style['img']} src={Bkdg} alt="" />*/}
								<img src={item.img} alt="" />
							</div>
							))}
						</div>
						<div className={`${style['game-list']} ${active === 2 ? style['active'] : style['hide']}`} >
							{tiyuitems.map((item, index) => (
							<div key={index}  className={style['enter-game-button']} onClick={() => onChangeItem(item)}>
								{/*<div className={style['game-name']}>
									<div>
										<img src={Logodg} alt="" />
										<div className={style['label']}>{item.title}</div>
									</div>
								</div>
								<img className={style['img']} src={Bkdg} alt="" />*/}
								<img src={item.img} alt="" />
							</div>
							))}
						</div>
						<div className={`${style['game-list']} ${active === 3 ? style['active'] : style['hide']}`} >
							{buyuitems.map((item, index) => (
							<div key={index}  className={style['enter-game-button']} onClick={() => onChangeItem(item)}>
								{/*<div className={style['game-name']}>
									<div>
										<img src={Logodg} alt="" />
										<div className={style['label']}>{item.title}</div>
									</div>
								</div>
								<img className={style['img']} src={Bkdg} alt="" />*/}
								<img src={item.img} alt="" />
							</div>
							))}
						</div>
						<div className={`${style['game-list']} ${active === 4 ? style['active'] : style['hide']}`} >
							{qipaiitems.map((item, index) => (
							<div key={index}  className={style['enter-game-button']} onClick={() => onChangeItem(item)}>
								{/*<div className={style['game-name']}>
									<div>
										<img src={Logodg} alt="" />
										<div className={style['label']}>{item.title}</div>
									</div>
								</div>
								<img className={style['img']} src={Bkdg} alt="" />*/}
								<img src={item.img} alt="" />
							</div>
							))}
						</div>
						<div className={`${style['game-list']} ${active === 5 ? style['active'] : style['hide']}`} >
							{dianziitems.map((item, index) => (
							<div key={index}  className={style['enter-game-button']} onClick={() => onChangeItem(item)}>
								{/*<div className={style['game-name']}>
									<div>
										<img src={Logodg} alt="" />
										<div className={style['label']}>{item.title}</div>
									</div>
								</div>
								<img className={style['img']} src={Bkdg} alt="" />*/}
								<img src={item.img} alt="" />
							</div>
							))}
						</div>
						<div className={`${style['game-list']} ${active === 6 ? style['active'] : style['hide']}`} >
							{dianjingitems.map((item, index) => (
							<div key={index}  className={style['enter-game-button']} onClick={() => onChangeItem(item)}>
								{/*<div className={style['game-name']}>
									<div>
										<img src={Logodg} alt="" />
										<div className={style['label']}>{item.title}</div>
									</div>
								</div>
								<img className={style['img']} src={Bkdg} alt="" />*/}
								<img src={item.img} alt="" />
							</div>
							))}
						</div>
					</div>
				</div>
				{/* <div style={{height:'50px'}}></div> */}
			</div>
			<img className={style['img0']} src={th1} alt="" onClick={() => navigate('/turntable')}/>
			<Tabbar select="0"/>
		</React.Fragment>
	)
}


export default Mine
